<template>
  <!-- 基本信息 -->
  <div>
    <div class="title-wrapper">
      <title-name title="重点监管质量风险监控计划信息"></title-name>
      <a-icon
        v-if="showPlanBoardVisible"
        :type="planBoardVisible ? 'up' : 'down'"
        @click="planBoardVisible = !planBoardVisible"
      />
    </div>
    <div  v-if="planBoardVisible">
      <div class="mb12">
        <a-button
          class="ml12"
          type="primary"
          @click="addRow"
        >增行</a-button>
      </div>
      <!-- 表格 -->
      <a-table bordered :data-source="dataSource" :columns="columns" rowKey="guid" size="default" style="width: 100%; overflow-x: auto;" :pagination="false">
          <!-- 风险名称 -->
          <template slot="name" slot-scope="text, record, index">
            <EditableCell :maxLength="100" :key="index + '-name'" filed="" :text="text" @change="onCellChange(record, 'name', $event)" :disabled="record.operation === false" :required="true"></EditableCell>
          </template>
          <!-- 工程部位 -->
          <template slot="projectPosition" slot-scope="text, record, index">
            <EditableCell :maxLength="100" :key="index + '-projectPosition'" :text="text" @change="onCellChange(record, 'projectPosition', $event)" :disabled="record.operation === false" :required="true"></EditableCell>
          </template>
          <!-- 监控停止点 -->
          <template slot="monitorEndpoint" slot-scope="text, record, index">
            <EditableCell :maxLength="100" :key="index + '-monitorEndpoint'" :text="text" @change="onCellChange(record, 'monitorEndpoint', $event)" :disabled="record.operation === false" :required="true"></EditableCell>
          </template>
          <!-- 验证人 -->
          <template slot="verifierId" slot-scope="text, record, index">
            <EditableSelect :key="index + '-verifierId'" :text="text" :options="organizePeopleList"  @change="onCellChange(record, 'verifierId', $event)" :disabled="record.operation === false" :required="true"></EditableSelect>
          </template>
          <!-- 检查人 -->
          <template slot="checkerId" slot-scope="text, record, index">
            <EditableSelect :key="index + '-checkerId'" :text="text" :options="organizePeopleList" @change="onCellChange(record, 'checkerId', $event)" :disabled="record.operation === false" :required="true"></EditableSelect>
          </template>
          <!-- 生效日期 -->
          <template slot="takeEffectDate" slot-scope="text, record, index">
            <EditableDate :key="index + '-takeEffectDate'" :text="text" @change="onCellChange(record, 'takeEffectDate', $event)" :disabled="record.operation === false" :required="true" :disabledDate="currentDate"></EditableDate>
          </template>
          <!-- 检查时限 -->
          <template slot="timeLimit" slot-scope="text, record, index">
            <EditableDate :key="index + '-timeLimit'" :text="text" @change="onCellChange(record, 'timeLimit', $event)" :disabled="record.operation === false" :required="true" :disabledDate="record.takeEffectDate"></EditableDate>
          </template>
          <!-- 检查频率（天/次） -->
          <template slot="frequency" slot-scope="text, record, index">
            <EditableNumber :min="1" :step="1" :key="index + '-frequency'" :text="text" @change="onCellChange(record, 'frequency', $event)" :disabled="record.operation === false" :required="true"></EditableNumber>
          </template>
          <template
            slot="action"
            slot-scope="text, record, index"
          >
            <a-popconfirm title="请确认是否要删除？" @confirm="() => onDelete(record)" v-if="record.operation !== false">
              <a class="base-btn del_btn">删除</a>
            </a-popconfirm>
          </template>
      </a-table>
    </div>
    
  </div>
</template>
  
<script>
import EditableCell from '@/views/quality/riskIdentification/components/EditableCell'
import EditableSelect from '@/views/quality/riskIdentification/components/EditableSelect'
import EditableDate from '@/views/quality/riskIdentification/components/EditableDate'
import EditableNumber from '@/views/quality/riskIdentification/components/EditableNumber'
import { riskMonitorPlangetEmoById } from '@/api/quality/risk/monitoringPlan'
const columns = [
    {
        title: '风险名称',
        dataIndex: 'name',
        scopedSlots: { customRender: 'name' },
        width: 150,
    },

    {
        title: '工程部位',
        dataIndex: 'projectPosition',
        scopedSlots: { customRender: 'projectPosition' },
        ellipsis: true,
        width: 150,
    },
    {
        title: '监控停止点',
        dataIndex: 'monitorEndpoint',
        scopedSlots: { customRender: 'monitorEndpoint' },
        ellipsis: true,
        width: 150,
    },
    {
        title: '验证人',
        dataIndex: 'verifierId',
        scopedSlots: { customRender: 'verifierId' },
        width: 150,
    },
    {
        title: '检查人',
        dataIndex: 'checkerId',
        scopedSlots: { customRender: 'checkerId' },
        ellipsis: true,
        width: 150,
    },
    {
        title: '生效日期',
        dataIndex: 'takeEffectDate',
        scopedSlots: { customRender: 'takeEffectDate' },
        width: 150,
    },
    {
        title: '检查时限',
        dataIndex: 'timeLimit',
        scopedSlots: { customRender: 'timeLimit' },
        width: 150,
    },
    {
        title: '检查频率(天/次)',
        dataIndex: 'frequency',
        scopedSlots: { customRender: 'frequency' },
        width: 150,
    },
    {
        title: '操作',
        dataIndex: 'action',
        scopedSlots: { customRender: 'action' },
        width: 100,
    },
]
const getGuid = () => {
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
        var r = Math.random() * 16 | 0
        var v = c === 'x' ? r : (r & 0x3 | 0x8)
        return v.toString(16)
    })
}
export default {
  name: 'a' + Date.now(),
  components: {
    EditableCell,
    EditableSelect,
    EditableDate,
    EditableNumber,
  },
  props: {
    // 表单
    form: {
      type: Object,
      default: () => ({})
    },
    // 是否显示箭头
    showPlanBoardVisible: {
      type: Boolean,
      default: () => false
    },
    // 默认展开
    defaultPlanBoardVisible: {
      type: Boolean,
      default: () => true
    }
  },
  watch: {
    defaultPlanBoardVisible: {
      handler(val) {
        this.planBoardVisible = val
      },
      immediate: true,
      deep: true
    },
    'form.id': {
      handler(val) {
        if (val) {
          if (this.form.updateDetails) {
            this.dataSource = this.form.updateDetails.map(v => {
              v.guid = getGuid()
              return v
            })
          }
        }
      },
      immediate: true,
      deep: true
    },
    'form.projectId': {
      handler(val) {
        if (val) {
          this.riskMonitorPlangetEmoById()
        }
      },
      immediate: true,
      deep: true
    },
      
  },
  data() {
    this.columns = columns
    return {
      dataSource: [],
      organizePeopleList: [],
      currentDate: new Date(),
      planBoardVisible: false
    }
  },
  created() {
  },
  methods: {
    onCellChange(item, dataIndex, value) {
      const dataSource = this.$clone(this.dataSource)
      const target = dataSource.find((el) => el.guid === item.guid)
      if (target) {
        target[dataIndex] = value
        if (dataIndex === 'takeEffectDate') {
          target['timeLimit'] = ''
        }
        this.dataSource = dataSource
      }
    },
    onDelete(item) {
      const dataSource = this.$clone(this.dataSource)
      this.dataSource = dataSource.filter((el) => el.guid !== item.guid)
    },
    addRow() {
      const { dataSource } = this
      const templateAddRow = {
          name: '',
          projectPosition: '',
          monitorEndpoint: '',
          verifierId: '',
          checkerId: '',
          takeEffectDate: null,
          timeLimit: null,
          frequency: undefined,
      }
      this.dataSource = [...dataSource, { ...templateAddRow, guid: getGuid() }]
    },
    //获取项目下的人员列表
    riskMonitorPlangetEmoById() {
      if (!this.form.projectId) return
      this.fetchingOrganizePeopleList = true
      riskMonitorPlangetEmoById(this.form.projectId).then((res) => {
        this.fetchingOrganizePeopleList = false
        let obj = {}
        res.data = res.data.reduce((cur, next) => {
          obj[next.employeeId] ? '' : (obj[next.employeeId] = true && cur.push(next))
          return cur
        }, []) //设置cur默认类型为数组，并且初始值为空的数组
        this.organizePeopleList = res.data.map(item => {
          item.value = item.employeeId
          item.label = item.employeeName
          return item
        })
      })
    },
  },
}
</script>
<style lang="less" scoped>
.title-wrapper {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  .titleName {
    margin: 0;
  }
  .anticon {
    margin-left: 5px;
    font-size: 18px;
  }
}
</style>